<template>
    <div class="qrbox">
      <canvas :canvas-id="id" :style="{
        width:`100%`,
        height:`100%`,
      }"></canvas>
    </div>
  </template>
  <script>
  import uQRCode from "./uqrcode.js";
  export default {
    props: {
      text: {
        default: "",
        type: String,
        required: false,
      },
    },
    data() {
      return {
        width: 100,
        height: 100,
        id: `qrcode${Math.random()}`,
      };
    },
    watch: {
      text() {
        this.getRec();
      },
    },
    methods: {
      // 获取尺寸
      getRec() {
        // let query = uni.createSelectorQuery().in(this);
        // query
        //   .select(".qrbox canvas")
        //   .boundingClientRect((e)=> {
        //     this.width = e.width
        //     this.height = e.height
        //     this.make()
        //   })
        //   .exec();


                    // 选择 .qrbox canvas 元素  
            const canvas = document.querySelector('.qrbox canvas');  

            if (canvas) {  
                // 获取元素的尺寸  
                const rect = canvas.getBoundingClientRect();  
                
                // 设置宽度和高度  
                this.width = rect.width;  
                this.height = rect.height;  

                // 调用 make 方法  
                this.make();  
            }  
      },
      make() {
        uQRCode.make({
          canvasId: this.id,
          componentInstance: this,
          text: this.text,
          size: this.width,
          margin: 0,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          fileType: 'jpg',
          correctLevel: uQRCode.errorCorrectLevel.H,
          success: res => {
          }
        })
      }
    },
    mounted() {
      this.getRec();
    },
  };
  </script>